<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
  
<body>

<div class="container-fluid">
  <div class="row">
  	<div class="col-lg-12">
  	  <div class="card">
  	    <div class="card-body">
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary me-1" onclick="openLayer('添加角色', '/admin/admin/addAuthGroup')">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
          </div>
  	      <table id="table"></table>
          
  	    </div>
  	  </div>
  	</div>

  </div>

</div>

{include file="public/script"}

<script>
	$(function(){
		/**
	 * 分页相关的配置
	 **/
	const pagination = {
		// 分页方式：[client] 客户端分页，[server] 服务端分页
		sidePagination: "server",
		// 初始化加载第一页，默认第一页
		pageNumber: 1,
		// 每页的记录行数
		pageSize: 12,
		// 可供选择的每页的行数 - (亲测大于1000存在渲染问题)
		pageList: [12, 24, 36, 50, 100],
		// 在上百页的情况下体验较好 - 能够显示首尾页
		paginationLoop: true,
		// 展示首尾页的最小页数
		paginationPagesBySide: 2
	};
	
	/**
	 * 按钮相关配置
	 **/
	const button = {
		// 按钮的类
		buttonsClass: 'default',
		// 类名前缀
		buttonsPrefix: 'btn'
	}
	
	/**
	 * 图标相关配置
	 **/
	const icon = {
		// 图标前缀
		iconsPrefix: 'mdi',
		// 图标大小
		iconSize: 'mini',
		// 图标的设置
		icons: {
			columns: 'mdi-table-column-remove',
			paginationSwitchDown: 'mdi-door-closed',
			paginationSwitchUp: 'mdi-door-open',
			refresh: 'mdi-refresh',
			toggleOff: 'mdi-toggle-switch-off',
			toggleOn: 'mdi-toggle-switch',
			fullscreen: 'mdi-monitor-screenshot',
			detailOpen: 'mdi-plus',
			detailClose: 'mdi-minus'
		}
	};
	
	/**
	 * 表格相关的配置
	 **/
	const table = {
		classes: 'table table-bordered table-hover table-striped lyear-table',
		// 请求地址
		url: '/admin/admin/authGroup',
		// 唯一ID字段
		uniqueId: 'id',
		// 每行的唯一标识字段
		idField: 'id',
		// 是否启用点击选中行
		clickToSelect: false,
		// 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
		// showToggle: true,
		// 请求得到的数据类型
		dataType: 'json',
		// 请求方法
		method: 'post',
		// 工具按钮容器
		toolbar: '#toolbar',
		// 是否分页
		pagination: true,
		// 是否显示所有的列
		showColumns: true,
		// 是否显示刷新按钮
		showRefresh: true,
		// 显示图标
		showButtonIcons: true,
		// 显示文本
		showButtonText: false,
		// 显示全屏
		showFullscreen: true,
		// 开关控制分页
		showPaginationSwitch: true,
		// 总数字段
		totalField: 'total',
		// 当字段为 undefined 显示
		undefinedText: '-',
		// 排序方式
		sortOrder: "asc",
		...icon,
		...pagination,
		...button
	};
	
	/**
	 * 用于演示的列信息
	 **/
	const columns = [{
		field: 'example',
		checkbox: true,
		// 列的宽度
		width: 5,
		// 宽度单位
		widthUnit: 'rem'
	}, {
		field: 'id',
		title: 'id',
	}, {
		field: 'name',
		align: 'center',
		title: '角色名称',
	}, {
		field: 'remark',
		align: 'center',
		title: '备注',
	},{
        field: 'status',
        title: '状态',
        formatter:function(value, row, index){ 
			var value="";
			if (row.status == '1') {
				
				value = '<span class="badge bg-success">正常</span>';
			} else if(row.status == '0') {
				value = '<span class="badge bg-danger">禁用</span>';
			} else {
				value = '<span class="badge bg-secondary">未知</span>' ;
			}
			return value;
		}
    }, {
		field: 'create_time',
		align: 'center',
		title: '创建时间',
	}, {
        field: 'operate',
        title: '操作',
        formatter: function(value, row, index){ 
        	if(row.rules != '*')
        	{
        		let html =
	            '<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-bs-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
	            '<a href="#!" class="btn btn-sm btn-default del-btn" title="删除" data-bs-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
	        	return html;
        	}
		},
        events: {
            'click .edit-btn': function (event, value, row, index) {
                event.stopPropagation();
                editUser(row.id);
            },
            'click .del-btn': function (event, value, row, index) {
                event.stopPropagation();
                delUser(row.id);
            }
        }
    }];
    
    // 自定义操作按钮
    function btnGroup (id) {
        let html =
            '<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-bs-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
            '<a href="#!" class="btn btn-sm btn-default del-btn" title="删除" data-bs-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
        return html;
    }
  
    // 操作方法 - 编辑
    function editUser(id) {
        openLayer('编辑', '/admin/admin/editAuthGroup?id='+id);
    }

    // 操作方法 - 删除
    function delUser(id) {
        layer.confirm('确定要删除吗?', function(index){
		    $.post('/admin/admin/delAuthGroup',{id:id},function(res)
		    {
		        if(res.code == 200)
		        {
		            showNotify(res.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'right');

		            $("#table").bootstrapTable('selectPage', $("#table").bootstrapTable("getOptions").pageNumber);  //跳转到此页
		        }else{
		            showNotify(res.msg, 'danger', 1000, 'mdi mdi-information-outline', 'top', 'right');
		        }
		    })
		    layer.close(index);
	  });  
    }
	
	$('table').bootstrapTable({
		...table,
		// 自定义的查询参数
		queryParams: function (params) {
			return {
				// 每页数据量
				limit: params.limit,
				// sql语句起始索引
				offset: params.offset,
				page: (params.offset / params.limit) + 1,
				// 排序的列名
				sort: params.sort,
				// 排序方式 'asc' 'desc'
				sortOrder: params.order
			};
		},
		columns,
        onLoadSuccess: function(data){
            $("[data-bs-toggle='tooltip']").tooltip();
        }
	});
	})
</script>
</body>
</html>
